<!--
 * @Date: 2022-04-10 11:51:08
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-04-21 16:03:02
 * @FilePath: \weibovue\src\components\loading.vue
 * @Description: 加载组件
-->
<template>
  <teleport to="#app">
    <div>
      <!-- <teleport to="#app"> -->
      <div class="Mymask">
        <div class="myLoding">
          <img src="../assets/loading.svg" />
          <i>正在加载中...</i>
        </div>
      </div>
      <!-- </teleport> -->
    </div>
  </teleport>
</template>

<style scoped lang="less">
.Mymask {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
}

.myLoding {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 24px;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;

  i {
    line-height: 100px;
  }

  img {
    width: 100px;
    height: 100px;
  }
}
</style>
